<template>
  <div id="registerform">
    <el-row>
      <el-col :span="22" :offset="1">
        <el-card class="box-card">
        <el-form ref="store" :model="store" label-width="80px" :rules="rules" style="margin-left: 50px;" class="demo-ruleForm">
          <el-form-item label="商铺名称" prop="storeName">
            <el-col id="min">
            <el-input v-model="store.storeName"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商铺地址" prop="address">
            <el-col id="min">
            <el-input v-model="store.address"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-col id="min">
            <el-input v-model="store.phone"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系人" prop="linkman">
            <el-col id="min">
            <el-input v-model="store.linkman" ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="创建人" prop="createUser">
            <el-col id="min">
            <el-input v-model="store.createUser" ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="创建时间" prop="createDate">
              <el-col :span="8">
                <el-date-picker type="date" placeholder="选择日期" v-model="store.createDate" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="营业执照" prop="license">
              <el-upload
                class="upload-demo"
                action="http://localhost:8080/storeRegister/upload"
                :on-success="handlelicense"
                multiple
                :limit="1"
                :file-list="fileList">
                <el-button size="small" type="primary" >点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="餐饮许可证" prop="permit">
              <el-upload
                class="upload-demo"
                action="http://localhost:8080/storeRegister/upload"
                :on-success="handlepermit"
                multiple
                :limit="1"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('store')">提交</el-button>
            </el-form-item>
          </el-form>
          </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'Registerform',
    data() {
      return{
        store:{
          storeName:"",
          address:"",
          phone:"",
          linkman:"",
          createUser:"",
          createDate:"",
          license:"",
          permit:""
        },
         rules: {
          storeName: [
            { required: true, message: '请输入商铺名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          address:[
             { required: true, message: '请输入商铺地址', trigger: 'blur' }
          ],
          phone:[
             { required: true, message: '请输入商铺电话', trigger: 'blur' }
          ],
          linkman:[
            { required: true, message: '请输入联系人姓名', trigger: 'blur' }
          ],
          createUser:[
            { required: true, message: '请输入创建人姓名', trigger: 'blur' }
          ],
          createDate:[
             { type: 'date', required: true, message: '请选择创建日期', trigger: 'change' }
          ],
          license:[
            {  required: true, message: '请上传营业执照', trigger: 'change' }
          ],
          permit:[
            { required: true, message: '请上传餐饮许可证', trigger: 'change' }
          ]
          }

      }
    },
    methods:{
      onSubmit(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.$http.post("/storeRegister/add", this.store)
            .then(resp => {
              if(resp.data.code==200){
                this.$router.push('/application');
              }else{
            this.$message.error(resp.data.message)
          }
              console.log(resp)
            });
          } else {
            return false;
          }
        })

      },
      handlelicense(resp, file) {
        if (resp.code == 200) {
          this.store.license = resp.data;
        }
        console.log(resp)
      },
      handlepermit(resp, file) {
        if (resp.code == 200) {
          this.store.permit = resp.data;
        }
        console.log(resp)
      }
    },
    created(){

    }
  }
</script>

<style scoped>
  #registerform{
    height: 600px;
  }

  #min{
    width: 500px;
  }
</style>
